<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

<title>游乐网——幻之大地</title>
<%@include file="/WEB-INF/views/include/easyuifile.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/css/fantasy-login.css">
<script language="javascript">
function w() {open("youle/user/forgetpass.html","_blank","menubar=no,location=no,scrollbars=yes,status=yes,toolbar=no,titlebar=no,width=300,height=300,top=50,left=50");}
function gt() {
var d = new Date();
return(""+d.getYear()+d.getMonth()+d.getDay()+d.getHours()+d.getMinutes()+d.getSeconds()+d.getUTCMilliseconds());
}
function SubmitUser(){
if (document.all["ID"].value == "") {alert("用户ID不能为空！");return false;}
else if (document.all["passwd"].value == "") {alert("用户密码不能为空！");return false;}
else {document.all.userform.action += "?time=" + gt();return true;}
}
</script>
</head>
<body bgcolor="#ffffff">
	<div class="container-fluid">
		<div class="row-fluid top">
		&nbsp;
		</div>
		<div class="row-fluid">
			<div class="col-md-3">&nbsp;
			</div>
			<div class="col-md-4">
				<img src="${ctxStatic}/images/fantasy/logo.gif" border="0" width="600px" height="750px">
				
			</div>
			<div class="col-md-2">
				<div class="row-fluid">&nbsp;
				</div>
				<div class="row-fluid">
					<img class="navimg" src="${ctxStatic}/images/fantasy/enter.gif">
				</div>
				<div class="row-fluid">
					<form action="${ctx}/fantasy/user/login.do" method="post">
				        <div class="form-inline">
				        	 <span class="form-label">用户名：</span>
				             <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" value="">
				        </div>
				        <div class="form-inline">
				        	 <span class="form-label">密　码：</span>
				             <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" value="">
				        </div>
				        <div class="form-inline">
				             <input class="form-label" style="width:100px;height:34px; type="text" id="inputCode" name="inputCode" placeholder="验证码">
				             <img style="width:100px;height:34px;cursor:pointer;" id="codeImg" alt="点击更换" title="点击更换" src="" />
				             <input class="form-label" id="submitlogin" type="button" style="height:24px; font-size:16px" onclick="javascript:login();"  class="btn btn-default" value="登录">
				        </div>
				        <div class="form-inline">
				        	 <a href="javascript:w()"><font color="ff0000"><b>我忘记密码了！</b></font></a>
				        </div>
				        
				    </form>
				    <div id="errorinfo" style="margin-top:10px;color: red;width:130px;">&nbsp;</div>
				</div>
				<div class="row-fluid">
					<a href="youle/about/new.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/new.gif"></a>
				</div>
				<div class="row-fluid">
					<a href="youle/about/about.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/about.gif"></a>
				</div>
				<div class="row-fluid">
					<a href="youle/about/help.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/help.gif"></a>
				</div>
				<div class="row-fluid">
					<a href="youle/about/version.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/version.gif"></a>
				</div>
			</div>
			<div class="span3">&nbsp;
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript" src="${ctxStatic}/js/login.js"></script> 
<script type="text/javascript">
$(function() {
  var oInput = $('#loginform').find('input.form-control');
  var oUser =$('#username');
  oUser.focus();
  var oPassword = $('#password');
  var oInputCode =$('#inputCode');
  $('input[type=button]').click(function(){
     if(oUser.val()==''){
       oUser.css({'border':'1px solid #fa2b48'});
     }
     if(oPassword.val()==''){
       oPassword.css({'border':'1px solid #fa2b48'});
     }
     if(oInputCode.val()==''){
       oInputCode.css({'border':'1px solid #fa2b48'});
     }
  });
	oInput.focus(function(){
    var w = $(this).width()-2+'px';
    var h =$(this).height()-2+'px';
	var idPassword=$(this).attr('id');
    $(this).css({'border':'1px solid #06bbe7','background-color':'#fff','width':w,'height':h});
	
	if(idPassword && idPassword=='password'){
		$(this).addClass('key');
	}
	});
  oInput.blur(function(){
    var w = $(this).width()+2+'px';
    var h =$(this).height()+2+'px';
    $(this).css({'border':'none','background-color':'#f1f1f1','width':w,'height':h});
	$(this).removeClass('key');
      
  });
});
</script>
</html>